<!-- 行政区域划分 -->
<template>
  <div class="map-exchange-bg1">
    <el-card class="map-bg">
      <div id="dividerMap"></div>
      <!-- <div id="container"></div> -->
    </el-card>
    <div class="operate-bg">
      <el-card style="margin-bottom: 20px;">
        <div slot="header" class="page-title-bg">
            <div class="page-title">
                <div class="title-icon">查询条件</div>
            </div>
        </div>
        <div class="formBody">
          <el-form :inline="true" size="small" class="form" label-width="110px">
                <el-form-item label="机构:">
                  <el-select v-model="formInline.institution" clearable  placeholder="请选择" class="ibput">
                    <el-option v-for="(item,index) in organizationList" :label="item.companyName" :value="item.companyCode" :key="index">
                      {{item.label}}</el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="服务专员:">
                  <el-select v-model="formInline.region" placeholder="请选择" class="ibput">
                      <el-option label="王艳" value="shanghai"></el-option>
                      <el-option label="陈艳" value="beijing"></el-option>
                      <el-option label="王彩营" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="续期服务类型:">
                  <el-select v-model="formInline.RenewalServiceType" placeholder="请选择" class="ibput">
                      <el-option label="督导件" value="1"></el-option>
                      <el-option label="专收件" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="交次:">
                  <el-select v-model="formInline.PayTime" placeholder="请选择" class="ibput">
                      <el-option label="二次" value="2"></el-option>
                      <el-option label="三次" value="3"></el-option>
                      <el-option label="四次及以上" value="4"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="是否考核件:">
                    <el-select v-model="formInline.EvaluationPiece" placeholder="请选择" class="ibput">
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="渠道:">
                    <el-select v-model="formInline.channel" placeholder="请选择" class="ibput">
                        <el-option label="个险" value="shanghai"></el-option>
                        <el-option label="银保" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="应交月：">
                  <el-date-picker
                    v-model="formInline.datetimerange"
                    type="monthrange"
                    range-separator="至"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="显示类型:" style="display: inline-block;">
                    <el-radio-group v-model="formInline.filterType">
                        <el-radio label="0">按保单</el-radio>
                        <el-radio label="1">按分单区域</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-form>
        </div>
      </el-card>
      <Card v-if="showCard">
        <div class="content" style="background: #E6A23C;display: flex;">
          <span style="margin: 0 16px;">总工作量：9 总保费：2万 总件数：10件 大额单：3件 高度困难件：2件</span>
        </div>
      </Card>
      <Card style="margin-top: 10px;">
        <el-table :data="tableList" max-height="320" style="width: 100%" v-if="flag">
          <el-table-column width="110" label="行政区域" prop="placeName" align="center" />
          <el-table-column width="110" label="分单区域" prop="areaName" align="center" />
          <el-table-column width="110" label="工作量" prop="work" align="center" />
          <el-table-column width="110" label="件数" prop="num" align="center" />
          <el-table-column width="110" label="保费" prop="prem" align="center" />
          <el-table-column width="110" label="大额单件数" prop="bigNum" align="center" />
          <el-table-column width="110" label="大额单保费" prop="bigPrem" align="center" />
          <el-table-column width="110" label="高困难件数" prop="highHardNum" align="center" />
          <el-table-column width="110" label="高困难件保费" prop="highHardPrem" align="center" />
        </el-table>
        <el-table :data="tableList" max-height="320" style="width: 100%"  v-else>
          <el-table-column width="110" label="投保人" prop="appntName" align="center" />
          <el-table-column width="110" label="保单号" prop="contNo" align="center" />
          <el-table-column width="110" label="渠道" prop="saleChnl" align="center" />
          <el-table-column width="110" label="交次" prop="paySize" align="center" />
          <el-table-column width="110" label="保费" prop="prem" align="center" />
          <el-table-column width="110" label="困难件分数" prop="hard" align="center" />
          <el-table-column width="110" label="督导专员代码" prop="agentCode" align="center" />
          <el-table-column width="110" label="督导专员姓名" prop="agentName" align="center" />
          <el-table-column width="110" label="投保人联系地址" prop="address" align="center" />
          <el-table-column width="110" label="主险险类" prop="risk" align="center" />
          <el-table-column width="110" label="行政区域" prop="placeName" align="center" />
          <el-table-column width="110" label="分单区域" prop="areaName" align="center" />
        </el-table>
    </Card>
    <div style="float: right; margin: 20px 0;">
      <el-button type="primary" size="mini" @click="search">查询</el-button>
      <el-button type="primary" size="mini">导出</el-button>
    </div>
    </div>
  </div>
</template>
<script>
import LabelsData from "../china-pp";
import { getCompanyList,getoverviewOfSpecialistDistribution } from '../../../api/renewalPlatformApi/index';

export default {
  name: 'commissionerDistribution',
  data() {
    return {
      showCard:false,
      formInline:{
        institution:"",
        region:"",
        startTime:"",
        endTime:"",
        RenewalServiceType:"",
        channel:"",
        PayTime:"",
        EvaluationPiece:"",
        filterType:"0"
      },
      organizationList:[],
      tableList: [],
      // 地图展示状态
      rangeForm: {
        manageCom: '无锡市',
        manageComCode: '320200',
        company: '',
      },
      fileList: [],
      dividerList: [],
      currentIsShowSonIdx: null,
      map: null,
      flag:false,
      list:[],
      infoWindow:null

    }
  },
  watch:{
    'formInline.filterType':{
      handler(val,old){
        if(val == 1){
          this.flag = true
          this.tableList = []
        }else{
          this.flag = false
        }
      }
    }
  },
  mounted() {
    this.mapLoad();
  },
  created(){ 
    this.getList();
  },
  methods: {
    getList() {
      getCompanyList({ companyType: '3',parentCode:'8601' }).then((res) => {
        if (res.code === 200) {
          res.data.forEach(item => {
            let temp = {
              companyCode: item.companyCode,
              companyName: item.companyName,
              placeCode: item.placeCode,
              isShowSon: false,
              checked: [],
              cityList: []
            }
            this.organizationList.push(temp);
          });
        }
      }).finally(() => {})
    },
    // 地图初始化
    mapLoad() {
      let disCountry = new AMap.DistrictLayer.Country({
        zIndex: 10,
        SOC: 'CHN',
        depth:1,
        styles: {
          'nation-stroke':'#ff0000',
          'coastline-stroke':'#0088ff',
          'province-stroke':'grey',
        }
      })
      this.map = new AMap.Map("dividerMap",{
        zooms: [4.2, 8],
        center:[106.122082, 33.719192],
        zoom: 4.6,
        isHotspot: false,
        defaultCursor:'pointer',
        layers:[
          disCountry
        ],
        viewMode:'3D',
      })
      this.map.addControl(new AMap.Scale());
      this.map.addControl(new AMap.ToolBar({ liteStyle: true }));
      const _this = this;
      this.map.on('complete',function(){
        let layer = new AMap.LabelsLayer({
          // 开启标注避让，默认为开启，v1.4.15 新增属性
          collision: false,
          // 开启标注淡入动画，默认为开启，v1.4.15 新增属性
          animation: true,
        });
        for (let i = 0; i < LabelsData.length; i++) {
          let labelsMarker = new AMap.LabelMarker(LabelsData[i]);
          layer.add(labelsMarker);
        }
        _this.map.add(layer);
      })
    },
    search(){
        if(this.formInline.institution){
          this.getDatalist()
          if(this.formInline.filterType == 0){
              this.getDot()
          }
        }else{
          this.$message.error("请选择机构");
        }
    },
    getDatalist(){
        let obj = {
            manageCom:this.formInline.institution,
            areaId:this.formInline.region,
            // willPayDateStart:this.formInline.datetimerange[0],
            // willPayDateEnd:this.formInline.datetimerange[1],
            renewalType:this.formInline.RenewalServiceType,
            saleChnl:this.formInline.channel,
            paySize:this.formInline.PayTime,
            flag:this.formInline.EvaluationPiece,
            type:this.formInline.filterType,
        }
        getoverviewOfSpecialistDistribution(obj).then( res =>{
            if(res.code == 200){
              this.showCard = true
                this.tableList = this.formInline.filterType == 0 ? res.data.contValue : res.data.areaValue
                this.list = this.tableList
                if(this.formInline.filterType == 1){
                  this.initReinsuranceMap()
                }
            }else{
                this.tableList = []
            }
        })
    },
    getDot(){
        getoverviewOfSpecialistDistribution({manageCom:"860101",type:"0"}).then( res =>{
          if(res.code == 200){
            this.tableList =  res.data.contValue
            let mapDot = new AMap.Map("dividerMap", {resizeEnable: true})
            let lnglats = []
            let listData = []
            for(let a=0;a< this.tableList.length; a++){
              this.tableList[a].point[Symbol.isConcatSpreadable] = false
              this.tableList[a][Symbol.isConcatSpreadable] = false

              lnglats = lnglats.concat(this.tableList[a].point)
              listData = listData.concat(this.tableList[a])
            }
            console.log(lnglats,"demomdeomdeodemoedmoe")
            let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(5, 8),anchor: 'top-left'});
            for (let i = 0; i < lnglats.length; i++) {
              let markerContent = '<div class="dot"></div>';
              let marker = new AMap.Marker({
                  position: lnglats[i],
                  map: mapDot,
                  content: markerContent,
              });
              
              let info = [];
              info.push(`<p class='input-item'>保单号: ${listData[i].contNo || 0} </p>`);
              info.push(`<p class='input-item'>投保人姓名: ${listData[i].appntName || '-'}</p>`);
              info.push(`<p class='input-item'>保费: ${listData[i].prem || '-'}元</p>`);
              info.push(`<p class='input-item'>交次: ${listData[i].paySize || '-'}</p>`);
              info.push(`<p class='input-item'>应交日: ${listData[i].willPayDate || '-'}</p>`);
              info.push(`<p class='input-item'>困难件分数: ${listData[i].hard || '-'}</p>`);
              info.push(`<p class='input-item'>是否考核件: ${listData[i].flag || '-'}</p>`);
              marker.content = info.join(""),
              marker.on('click', (e)=>{
              infoWindow.setContent(e.target.content);
              infoWindow.open(mapDot, e.target.getPosition());
              });
              marker.emit('click', {target: marker});
            }
            mapDot.setFitView();
          }else{
            this.tableList = []
          }
        })        
    },
    initReinsuranceMap() {
      this.map = null;
      let acCode = '320200';
      this.map = new AMap.Map("dividerMap", {
        center: [120.305455901, 31.5700374519],
        zoom: 3
      });
      let polygons = [];
      //行政区划查询
      let opts = {
        subdistrict: 1,   // 返回下一级行政区
        showbiz: false  // 最后一级返回街道信息
      };
      let district = new AMap.DistrictSearch(opts);//注意：需要使用插件同步下发功能才能这样直接使用
      // 清除地图上所有覆盖物
      for (let i = 0, l = polygons.length; i < l; i++) {
        polygons[i].setMap(null);
      }
      district.setLevel('city'); // 行政区级别
      district.setExtensions('all');
      // 行政区查询：按照adcode进行查询可以保证数据返回的唯一性
      const _this = this;
      district.search(acCode, function (status, result) {
        if (status === 'complete') {
          let data = result.districtList[0];
          let bounds = data.boundaries;
          if (bounds) {
            for (let i = 0, l = bounds.length; i < l; i++) {
              let polygon = new AMap.Polygon({
                map: _this.map,
                strokeWeight: 1,
                strokeColor: '#0091ea',
                fillColor: '#80d8ff',
                fillOpacity: 0.2,
                path: bounds[i]
              });
              polygons.push(polygon);
            }
            _this.map.setFitView();//地图自适应
          }
        }
        _this.getInfo()
      });
    },
    getInfo(){
      var info = [];
      info.push(`<p class='input-item'>总工作量: ${300}</p>`);
      info.push(`<p class='input-item'>总保费: ${5}万</p>`);
      info.push(`<p class='input-item'>总件数: ${3000}</p>`);
      info.push(`<p class='input-item'>大额单件数: ${2}万</p>`);
      info.push(`<p class='input-item'>高度困难件: ${3}</p>`);
      info.push(`<p class='input-item'>高度困难件保费: ${3}万</p>`);
      let infoDate = new AMap.InfoWindow({
      anchor: "top-left",
      content: info.join("<br/>")  //使用默认信息窗体框样式，显示信息内容
      });
      var position = [120.305455901, 31.5700374519];
      infoDate.open(this.map,position);
    }
  },
}
</script>

<style lang="scss">
.dot {
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
}
.map-exchange-bg1{
  display: flex;
  .page-title-bg{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .page-title{
      display: flex;
      align-items: center;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #2A2A2A;
      .title-icon{
        color: #fff;
      }
    }
    .page-title-operate{
      padding-left: 10px;
    }
  }
  .formBody{
    .ibput{
      width:150px;
    }
  }
  
  .map-bg{
    width: 60%;
    position: relative;
    .el-card__body{
      padding: 0;
    }
    #dividerMap{
      width: 100%;
      height: calc(100vh - 160px);
    }
  }
  .operate-bg{
    width: 39%;
    margin-left: 10px;
    .divide-bg{
      .divide-upload{
        padding: 0 0 10px 10px;
        span:nth-child(1){
          color: #818181;
        }
        span:nth-child(2){
          color: #CFCFCF;
        }
      }
      .upload-btn{
        display: inline-block;
      }
    }
    // .content{
    //   // height: 30px;
    //   background: #E6A23C;
    //   // margin-bottom: 20px;
    //   span{
    //     line-height: 30px;
    //     margin: 0 16px;
    //   }
    // }
  }
.el-card__header {
    border: 0;
    background-color: #082AFF;
    border-radius: 10px 10px 0 0;
  }
  ::v-deep.el-card__body{
    padding: 15px;
  }
}
</style>
